<template>
    <el-main>
        <!-- 条件查询 -->
        <el-form :inline="true" ref="searchForm" label-width="80px" size="small">
            <el-form-item>
                <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="resetValues()">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
            stripe :tree-props="{ children: 'children' }">
            <el-table-column prop="departmentName" label="部门名称" />
            <el-table-column prop="parentName" label="上级部门" />
            <el-table-column prop="phone" label="部门电话" />
            <el-table-column prop="address" label="部门地址" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit-outline"
                        @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete-solid"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 对话框  -->
        <system-dialog :title="deptDialog.title" :visible.sync="deptDialog.visible" :width="deptDialog.width"
            :height="deptDialog.height" @onClose="onClose" @onConfirm="onConfirm">
            <div slot="content">
                <el-form :model="dept" ref="deptForm" :rules="rules" label-width="80px" size="small" :inline="true">
                    <el-form-item label="所属部门" prop="parentName">
                        <el-input v-model="dept.parentName" :readonly="true"
                            @click.native="selectDepartment()"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="departmentName">
                        <el-input v-model="dept.departmentName"></el-input>
                    </el-form-item>
                    <el-form-item label="部门电话" prop="phone">
                        <el-input v-model="dept.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="部门地址" prop="address">
                        <el-input v-model="dept.address"></el-input>
                    </el-form-item>
                    <el-form-item label="序号" prop="orderNum">
                        <el-input v-model="dept.orderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </system-dialog>
        <!-- 选择所属部门窗口 -->
        <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
            :height="parentDialog.height" @onClose="parentOnClose" @onConfirm="parentOnConfirm">
            <div slot="content">
                <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps"
                    :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"
                    @node-click="handleNodeClick">
                    <div class="customer-tree-node" slot-scope="{ node, data }">
                        <span v-if="data.children.length === 0">
                            <i class="el-icon-document"></i>
                        </span>
                        <span v-else @click="openBtn(data)">
                            <svg-icon v-if="data.open" icon-class="add-s" />
                            <svg-icon v-else icon-class="sub-s" />
                        </span>
                        <span style="margin-left: 5px">{{ node.label }}</span>
                    </div>
                </el-tree>
            </div>
        </system-dialog>
    </el-main>
</template>

<script>
import departmentApi from "@/api/department";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
// import {getDepartmentList} from "@/api/department"; //引入部门API
export default {
    name: 'department',
    components: {
        SystemDialog
    },
    data() {
        return {
            searchModel: {
                departmentName: '',//部门名称
            },
            tableData: [], //数据表格
            //部门窗口属性
            deptDialog: {
                title: "新增部门",
                visible: false, //是否显示
                width: 600,
                height: 170,
            },
            //部门对象
            dept: {
                id: "",
                pid: "",
                parentName: "",
                departmentName: "",
                address: "",
                phone: "",
                orderNum: "",
            },
            //表单验证规则
            rules: {
                parentName: [{
                    required: true,
                    trigger: "change",
                    message: "请选择所属部门"
                }],
                departmentName: [{
                    required: true,
                    trigger: "blur",
                    message: "请输入部门名称"
                }],
            },
            //选择所属部门属性
            parentDialog: {
                title: "选择所属部门",
                visible: false, //是否显示
                width: 300,
                height: 400,
            },
            //树形菜单列表
            treeList: [],
            defaultProps: {
                children: "children",
                label: "departmentName",
            },
        }
    },
    created() {
        this.search()
    },
    methods: {
        //查询
        async search() {
            let res = await departmentApi.getDepartmentList(this.searchModel);
            if (res.success) {
                this.tableData = res.data;
            }
        },
        //重置
        resetValues() {
            this.searchModel = {};
            this.search();
        },

        //编辑
        handleEdit(row) {
            //数据回显
            this.$objCopy(row, this.dept);
            //设置窗口标题
            this.deptDialog.title = "编辑部门";
            //显示编辑部门窗口
            this.deptDialog.visible = true;

        },
        //删除
        async handleDelete(row) {
            //检查部门下是否存在子部门或用户
            let result=await departmentApi.checkDepartment({
                id:row.id
            });
            if(!result.success){
                //提示不能删除
                this.$message.warning(result.message);
            }else{
                //弹出确认框
                let confirm=await this.$myconfirm("确定要删除该数据吗?","提示");
                if(confirm){
                   let res= await departmentApi.deleteById({id:row.id});
                   if(res.success){
                    //提示成功
                    this.$message.success(res.message);
                    //刷新
                    this.search();
                   }else{
                    //提示失败
                    this.$message.error(res.message);
                   }
                }
            }
        },
        //关闭窗口
        onClose() {
            this.deptDialog.visible = false;
        },
        //确认
        onConfirm() {
            //表单验证
            this.$refs.deptForm.validate(async (valid) => {
                if (valid) {
                    let res=null;
                    ////判断部门ID是否有数据，如果部门ID为空，则表示新增，否则就是修改
                    if(this.dept.id==''){
                        //发送添加请求
                        res= await departmentApi.addDept(this.dept);
                    }else{
                        //发送修改请求
                        res= await departmentApi.updateDept(this.dept);
                    }
                    if (res.success) {
                        this.$message.success(res.message);
                        //刷新
                        this.search();
                        this.deptDialog.visible = false;
                    }else{
                        this.$message.error(res.message);
                    }
                }
            })
        },
        //关闭所属部门窗口
        parentOnClose() {
            this.parentDialog.visible = false;
        },
        //确认所属部门
        parentOnConfirm() {
            this.parentDialog.visible = false;
        },
        //选择所属部门
        async selectDepartment() {
            let res = await departmentApi.getParentTreeList();
            this.parentDialog.visible = true;
            this.parentDialog.title = "选择所属部门";
            if (res.success) {
                this.treeList = res.data;
            }
        },
        //打开新增部门对话框
        openAddWindow() {
            //清空表单数据
            this.$resetForm('deptForm',this.dept)
            //设置窗口标题
            this.deptDialog.title = "新增部门";
            //显示添加部门窗口
            this.deptDialog.visible = true;
        },
        //树节点点击事件
        handleNodeClick(data) {
            //当点击树节点时，赋予选中的值
            this.dept.pid = data.id;
            this.dept.parentName = data.departmentName;
        },
        //点击树节点+-号折叠展开事件
        openBtn(data) {
            //修改折叠展开状态
            data.open = !data.open;
            this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open;
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
    .el-tree-node {
        position: relative;
        padding-left: 10px;
    }

    .el-tree-node__children {
        padding-left: 20px;
    }

    .el-tree-node :last-child:before {
        height: 40px;
    }

    .el-tree>.el-tree-node:before {
        border-left: none;
    }

    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before,
    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree :first-child .el-tree-node:before {
        border-left: none;
    }

    .el-tree-node:before {
        border-left: 1px dotted #d9d9d9;
        bottom: 0px;
        height: 100%;
        top: -25px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 1px dotted #d9d9d9;
        height: 20px;
        top: 14px;
        width: 24px;
    }

    .el-tree-node__expand-icon.is-leaf {
        width: 8px;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        display: none;
    }

    .el-tree-node__content {
        line-height: 30px;
        height: 30px;
        padding-left: 10px !important;
    }
}

::v-deep .el-tree>div {
    &::before {
        display: none;
    }

    &::after {
        display: none;
    }
}
</style>